<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>this</title>
    <script>
        function removeLi(item){
            // console.log(item)
            const ul = document.getElementsByTagName("ul")[0];
            const li = item.parentNode;
            ul.removeChild(li)
        }

        function addLi(){
            const name = document.getElementById("name").value
            const ul = document.getElementById("stus")
            ul.innerHTML += '<li>\n' +
                '            <span>' + name + '</span>\n' +
                '            <button onclick="removeLi(this)">删除</button>\n' +
                '        </li>'
            document.getElementById("name").value = ""
        }
    </script>
</head>
<body>
    <input id="name" placeholder="请输入姓名"/><button onclick="addLi()">添加</button>
    <ul id="stus">
        <li>
            <span>jack</span>
            <button onclick="removeLi(this)">删除</button>
        </li>
        <li>
            <span>tom</span>
            <button onclick="removeLi(this)">删除</button>
        </li>
        <li>
            <span>mike</span>
            <button onclick="removeLi(this)">删除</button>
        </li>
    </ul>
</body>
</html>